{include  file="common/doc" /}
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">

        <div class="layui-card-body">
            <table class="layui-table" id="table_list" lay-filter="table_list"></table>
        </div>
    </div>
</div>
<template id="table_toolbar">
    <div class="layui-btn-group">
        <?php echo $operation['toolbar']; ?>
    </div>
</template>
<!-- 表格操作列 -->
<script type="text/html" id="op_table">
    <?php echo $operation['tool']?>
</script>
<template id="form_template" style="display: none">
    <form class="layui-form" id='form' lay-filter="form">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">基本信息</li>
                <li>参数</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类</label>
                        <div class="layui-input-inline">
                            <select name="api_type" id="">
                                <option value=""></option>
                                <option value="1">淘宝</option>
                                <option value="2">拼多多</option>
                                <option value="3">京东</option>
                                <option value="4">抖音</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">接口名称</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="api_name" placeholder="输入接口名称"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">请求路径</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="api_path" value="/ll/task_add" placeholder="请求路径"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">签名</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="sign" placeholder="由系统自动生成不允许修改" disabled/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">成本价</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="number" name="cost_price" placeholder="单位流量币"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">价格</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="number" name="price" placeholder="单位流量币"/>
                        </div>
                    </div>
                    {foreach $level as $key=>$vo}
                    <div class="layui-form-item">
                        <label class="layui-form-label">{$vo.level_name}</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="number" name="level[{$vo.level_id}][price]" placeholder="单位流量币"/>
                            <input class="layui-input" type="hidden" name="level[{$vo.level_id}][level_id]" value="{$vo.level_id}" />
                            <input class="layui-input" type="hidden" name="level[{$vo.level_id}][price_id]" value="" />
                        </div>
                    </div>
                    {/foreach}
                </div>
                <div class="layui-tab-item">
                    <div class="layui-form-item">
                        <label class="layui-form-label">参数选择</label>
                        <div class="layui-input-block">
                            <select name="api_param_id" xm-select="param_chooser" xm-select-height="36px" xm-select-search="" xm-select-search-type="dl">
                                {foreach $ApiParam as $key=>$vo}
                                <option value="{$vo.api_param_id}" >{$vo.field_alias}</span></option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                    <div class="attach_field">

                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" type="submit" lay-submit lay-filter="form_submit">提交</button>
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
            </div>
        </div>

    </form>
</template>
<script src="/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
    }).use(['index', 'util', 'table','formSelects'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var formSelects = layui.formSelects;

        table.render({
            elem: '#table_list'
            , url: 'read' //数据接口
            , height: 'full-20'
            , toolbar: '#table_toolbar'
            , page: true //开启分页
            , limit: 30
            , cols: [[ //表头
                {type: 'numbers'},
                {type: 'checkbox'},
                {field: 'api_name', title: '接口名称', align: "center"},
                {field: 'sign', title: '签名', align: "center"},
                {field: 'price', title: '价格', align: "center"},
                {align: 'center', toolbar: '#op_table', title: '操作', width: 300}
            ]]
        });
        table.on('tool(table_list)', function (obj) {
            let event = obj.event;
            if (event.includes('upd')) {
                //更新
            }
            if (event.includes('del')) {
                // 删除
            }
        });
        function create_param(field = []){
            let attach_field = $('.attach_field');
            let param = {:json_encode($ApiParam)};
            let template = '';
           field =  field.filter(function(val){
                return !(!val || val === "");
            });
            field.forEach(function(item,index){
            let param_field=  param.find(function(param){
                return param.api_param_id ==item;
              });

                template += `<input type="hidden" name="api_field[${param_field['api_param_id']}][api_param_id]"  value="${param_field['api_param_id']}" >`;
                template += `<input type="hidden" name="api_field[${param_field['api_param_id']}][api_field_id]"  value="" >`;
             if (param_field.is_param){
                 template += '<div class="layui-form-item">';
                 template += `<label class="layui-form-label">${param_field['field_alias']}</label>`;
                 template += ' <div class="layui-input-inline">';
                 template += `<input type="text" lay-verify="required" name="api_field[${param_field['api_param_id']}][name]" class="layui-input" placeholder="字段名称">`;
                 template += '   </div>';
                 template += ' <div class="layui-input-inline" style="width: 100px">';
                 template +=`<input type="checkbox" name="api_field[${param_field['api_param_id']}][is_require]" value="1" lay-skin="switch" lay-text="选填|必填">`;
                 template +='</div>';
                 if (param_field['input_type']=== 2){
                     template += ' <div class="layui-input-inline">';
                     let option = param_field.value.split("\n");
                     template += `<select name="api_field[${param_field['api_param_id']}][default]">`;
                     option.forEach(function(op){
                         let ops = op.split('=');
                         template += `<option value="${ops[0]}">${ops[1]}</option>`;
                     });
                     template += '</select>';
                     option.forEach(function(op){
                         let ops = op.split('=');
                         template += '<div style="padding-top: 10px">';
                         template += `<div style="display: inline-block;width: 80px;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;">${ops[1]}</div>`;
                         template +=`<input name="api_field[${param_field['api_param_id']}][price][${ops[0]}]"  type="number"  placeholder="价格" style="width: 100px;height: 37px">`;
                         template += '</div>';
                     });
                     template += '</div>';
                 }else{
                     template += ' <div class="layui-input-inline">';
                     template +=`<input name="api_field[${param_field['api_param_id']}][default]" type="text" class="layui-input" placeholder="默认值">`;
                     template +='</div>';
                     template += ' <div class="layui-input-inline" style="width: 100px">';
                     template +=`<input name="api_field[${param_field['api_param_id']}][price]"   type="number" class="layui-input" placeholder="价格">`;
                     template +='</div>';
                 }
                 template += '   </div>';
             }else{
                 template += '<div class="layui-form-item">';
                 template += `<label class="layui-form-label">${param_field['field_alias']}</label>`;
                 template += ' <div class="layui-input-inline">';
                 let option = param_field.value.split("\n");
                 template += `<select lay-verify="required" name="api_field[${param_field['api_param_id']}][default]" lay-search>`;
                 template += `<option value=""></option>`;
                 option.forEach(function(op){
                     let ops = op.split('=');
                     template += `<option value="${ops[0]}">${ops[1]}</option>`;
                 });
                 template += '</select>';
                 template += '</div>';
                 template +='</div>';
             }

            });
            attach_field.html(template);
            form.render();
        }
        table.on('toolbar(table_list)', function (obj) {
            let event = obj.event;
            if (event.includes('add')) {
                // 添加
                layer.open({
                    type: 1,
                    area: ['800px', '500px'],
                    content: $('#form_template').html(),
                    success: function (lay, index) {
                        form.render();
                        formSelects.render('param_chooser');
                        form.on('submit(form_submit)',function(form_obj){
                            let field = form_obj.field;
                            let  status = request({'url':'add','data':field});
                            return false;
                        });
                        formSelects.on('param_chooser', function(id, vals, val, isAdd, isDisabled){
                            //id:           点击select的id
                            //vals:         当前select已选中的值
                            //val:          当前select点击的值
                            //isAdd:        当前操作选中or取消
                            //isDisabled:   当前选项是否是disabled
                            //如果return false, 那么将取消本次操作
                           let chooser_val =  formSelects.value('param_chooser', 'val');
                           if (isAdd){
                               chooser_val.push(val.value);
                           }else{
                               let index =  chooser_val.indexOf(val.value);
                              chooser_val.splice(index,1);
                           }
                            create_param(chooser_val);
                        });
                        let form_vals = form.val('form');

                    }
                })
            }

        });
        table.on('tool(table_list)',function(obj){
            let event = obj.event;
            if (event.includes('upd')) {
                layer.open({
                    type: 1,
                    area: ['800px', '500px'],
                    title:obj.data['api_name'],
                    content: $('#form_template').html(),
                    success: function (lay, index) {
                        form.render();
                        formSelects.render('param_chooser');
                        formSelects.value('param_chooser',obj.data['api_param_id'].split(','));
                        create_param(obj.data['api_param_id'].split(','));

                        obj.data.api_price.forEach(function(item,index){
                            Object.keys(item).forEach(function(ite){
                                obj.data[`level[${item.level_id}][${ite}]`] = item[ite];
                            })
                        });
                        let build_param = {};
                        obj.data.api_field.forEach(function(item){
                            build_param[item['name']]= '';
                           Object.keys(item).forEach(function(key){
                               obj.data[`api_field[${item.api_param_id}][${key}]`] = item[key];
                               if (key.includes('price')){
                                   if ( item[key].includes('}') || item[key].includes(']')){
                                       let price =JSON.parse(item[key]);
                                       Object.keys(price).forEach(function(p){
                                           obj.data[`api_field[${item.api_param_id}][${key}][${p}]`] = price[p];
                                       })
                                   }
                               }
                           });
                        });
                        console.log(build_param);

                        form.on('submit(form_submit)',function(form_obj){
                            let field = form_obj.field;
                            field['api_id'] = obj.data['api_id'];
                            let  status = request({'url':'upd','data':field});
                            if (status){
                                layer.close(index);
                                table.reload('table_list');
                            }
                            return false;
                        });

                     formSelects.on('param_chooser', function(id, vals, val, isAdd, isDisabled){
                            let chooser_val =  formSelects.value('param_chooser', 'val');
                            if (isAdd){
                                chooser_val.push(val.value);
                            }else{
                                let index =  chooser_val.indexOf(val.value);
                                chooser_val.splice(index,1);
                            }
                            create_param(chooser_val);
                               form.val('form',obj.data);
                        });
                       form.val('form',obj.data);

                    }
                })
            }
        });
    });
</script>
</body>
</html>

